<template>
	<view>
		<view>
			<u-image :src="proDetail.cover" width="100%" height="360rpx"></u-image>
		</view>

		<view class="p20">
			<view class="bgc-fff br12 p26">
				<view><text class="fs26 c-333">{{proDetail.name}}</text></view>
				<view class="c-red mt15">
					<!-- <text class="fs24">￥</text> -->
					<text class="fs30 ml6 fwb">{{proDetail.unit}}</text> 
					<!-- <text class="fs24 ml2">元/次</text>  -->
				</view>
			</view>

			<view class="p30 bgc-fff mt20 br12">
				<view class="c-theme t-c mb30">-<text class="ml10 mr10 fs26">商品详情</text>-</view>
				<template v-for="(it,ind) in proDetail.detail">
					<u-image :src="it" mode="widthFix" :key="ind"></u-image>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getProDetailApi
	} from '@/api/shop.js'
	export default {
		data() {
			return {
				option: {},
				proDetail: {}
			}
		},
		onLoad(option) {
			option && (this.option = option)
		},
		onShow() {
			this.$nextTick(this.getProDetail)
		},
		onPullDownRefresh() {
			this.getProDetail()
		},
		methods: {
			async getProDetail() {
				uni.showLoading({
					title: '数据加载中...'
				})
				const {code,data} = await getProDetailApi({
					id: this.option.id
				})
				uni.hideLoading()
				uni.stopPullDownRefresh()
				if(code != 0) return
				this.proDetail = data
				this.proDetail.detail = data.detail.split(',')
			}
		}
	}
</script>

<style scoped lang="scss">
</style>
